import { Select } from "antd";
import { AddInput } from "@/components/func";
import "./index.less";

interface SelectGroupProps {
  domId: string; // 选择的分组id
  qrGroupId: number; // 选择的分组id
  listGroupData: any[]; // 可选的分组列表
  setQrGroupId: any; // 设置选择的分组id
  onPressEnter: (str: string) => void;
}

const { Option } = Select;

const SelectGroup = ({
  domId,
  qrGroupId,
  setQrGroupId,
  listGroupData,
  onPressEnter,
}: SelectGroupProps) => {
  return (
    <div id={domId} className="area">
      {listGroupData.length > 0 && (
        <Select
          allowClear
          placeholder="请选择分组名称"
          defaultValue={qrGroupId || ""}
          value={qrGroupId}
          style={{ width: 300 }}
          virtual={false}
          getPopupContainer={(): any => document.getElementById(domId)}
          onChange={(value: any) => {
            setQrGroupId(value);
          }}
          dropdownRender={menu => (
            <div className="group-list w-300 box-border rounded-bl-sm flex flex-col">
              <AddInput
                addName="添加分组"
                placeholder="名称"
                length={10}
                icon="icon-tianjia1"
                onPressEnter={e => {
                  onPressEnter(e);
                }}
              />
              <div className="max-h-250 scrollY">{menu}</div>
            </div>
          )}>
          {listGroupData.map((item: any) => {
            return (
              <Option key={item.id} value={item.id}>
                <span>{item.name}</span>
                <span className="count text-grey-300">{item && item.count}</span>
              </Option>
            );
          })}
        </Select>
      )}
    </div>
  );
};

export default SelectGroup;
